<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：用于DOM树中遍历元素 【元素嵌套，父子级关系】
		 children()
		parent()
		
		silbings()
		
		next()
		prev()
		
		each() 
		-->
	</head>
	<body>
		<!-- html:div.container 父级 6个div.box 每个#box1 子级
		             6个按钮
		 css：.container添加样式 边框1px，内外边距10px
		       .box添加样式  背景色，内外边距10px
			   button添加样式   外边距：5px
			   jq：引入
			   -->
			   <div class="container">
			           <div class="box" id="box1">盒子1</div>
			           <div class="box" id="box2">盒子2</div>
			           <div class="box" id="box3">盒子3</div>
			           <div class="box" id="box4">盒子4</div>
			           <div class="box" id="box5">盒子5</div>
			           <div class="box" id="box6">盒子6</div>
			           
			           <button>按钮1</button>
			           <button>按钮2</button>
			           <button>按钮3</button>
			           <button>按钮4</button>
			           <button>按钮5</button>
			           <button>按钮6</button>
			       </div>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 这里可以添加jQuery代码
    $(document).ready(function() {
          // 示例：点击盒子时改变背景色
         $(".box").click(function() {
              $(this).css("background-color", getRandomColor());
         });
            
         // 示例：点击按钮时显示对应的盒子编号
         $("button").click(function() {
             var index = $("button").index(this) + 1;
             alert("你点击了按钮" + index + "，对应盒子" + index);
         });
         
         // 生成随机颜色函数
        functi5h on getRandomColor() {
             var letters = '0123456789ABCDEF';
              var color = '#';
             for (var i = 0; i < 6; i++) {
                   color += letters[Math.floor(Math.random() * 16)];
             }
             return color;
         }
        });
    </script>
	</body>
</html>